<template>
  <div class="h-100 d-flex flex-column">
    <div class="special_top">
      <span>绿水保卫，让水清岸绿</span>
    </div>
    <div class="flex-fill p-1 d-flex">
      <van-sidebar v-model="activeKey" class="h-100 overflow-auto" style="width: 100px" @change="changeSidebar">
        <van-sidebar-item title="污染源调查" />
        <van-sidebar-item title="调度监管" />
      </van-sidebar>
      <div class="flex-fill pl-1 pr-1">
        <van-collapse v-model="collapseParams.activeNames">
          <van-collapse-item :title="collapseParams.title" name="2" icon="records-o">
            <component :is="dynamicComponents" />
          </van-collapse-item>
        </van-collapse>
      </div>
    </div>
  </div>
</template>

<script>
import verification from '@/views/special/components/verification.vue'
import taskManagement from '@/views/special/components/taskManagement.vue'

export default {
  name: 'WrySources',
  components: { verification, taskManagement },
  data() {
    return {
      activeKey: 0, // 默认选中 污染源调查
      collapseParams: {
        activeNames: ['2'],
        title: '现场核查'
      },
      dynamicComponents: 'verification'
    }
  },
  methods: {
    changeSidebar(value) {
      if (value === 0) {
        this.collapseParams.title = '现场核查'
        this.dynamicComponents = 'verification'
      } else {
        this.collapseParams.title = '任务管理'
        this.dynamicComponents = 'taskManagement'
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.special_top {
  width: 100%;
  height: 40vw;
  background-image: url("../../assets/APPImage/top_bg_big.png");
  background-size: 100% 100%;
  background-position: center center;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 6.2vw;
  font-weight: bold;
  span {
    margin-bottom: 6vw;
  }
}
::v-deep .van-sidebar-item--select::before {
  background-color: transparent !important;
}
::v-deep .van-sidebar-item {
  margin-bottom: 0.26rem;
  padding: 0.24rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
::v-deep .van-collapse-item__content {
  padding: 0.28rem;
}
::v-deep .van-sidebar-item--select {
  background-color: #357eec;
  box-shadow: 0 0 0.2rem #357eec;
  color: white;
  transition: 0.12s linear all;
}
::v-deep .van-collapse-item__wrapper {
  border: none !important;
}
</style>
